<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title> 
    
    <script src="../js/axios.min.js"></script>
<script src="../js/api.js"></script>
    
   
    <link rel="stylesheet" href="../css/zc.css" />
  </head>
  <body>
    <div class="head">
      <div class="head-warp">
        <div class="logo">
          <img src="../images/img-login/logo.png" alt="" />
        </div>
        <div class="head-right">
          <ul>
            <li><a href="http://www.secoo.com/"> 寺库首页</a></li>
            <li><a href=""> 收藏寺库</a></li>
            <li>
              <a href="http://www.secoo.com/special/sikuApp.shtml"> 寺库APP</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="dnav">
    <div class="nav">
      <div class="right-ipt">
        <div class="x">
          <p>用户</p>
          <input type="text" placeholder="请输入手机号码或邮箱" /><span></span> <br />
          <p>密码</p>
          <input type="password" /><span></span> <br />
          <p>确认密码</p>
          <input type="password" /><span></span><br />
        </div>
        <div class="y"><input type="checkbox" /><span>贵宾邀请码</span></div>
        <button>注册</button>
        <div class="z">
          <input type="checkbox" /><span
            >我已阅读并同意《用户注册协议》《隐私协议》<br />《平台服务协议》《消费者告知书》
          </span>
        </div>
        <div class="o">
            <p>已有帐号？ <a href="../html/dl.html ">立即登录</a></p>
           
        </div>
      </div>
    </div>

    <script>
      let ipts = document.querySelectorAll(".x input");
      console.log(ipts);
      let span=document.querySelectorAll(".x span")
      console.log(span);
      let btns=document.querySelector("button")
      let isUsername=false
      let isPassword=false
     ipts[0]. onfocus =function(){
        span[0].innerHTML="请输入手机号或邮箱"
        span[0].style.color="gray"

     }
     
     ipts[0]. onblur =function(){
         let yz=  /^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$|^\w+@(126|163|qq)+\.com$/; 
        
         if(yz.test(this.value)){
             axios
             .get(checkusernameAPI,{
                 params:{username:ipts[0].value},
             })
             .then((res)=>{
                 let obj=res.data
                 console.log(obj);

                 span[0].innerHTML=obj.msg
                 if(obj.code==1){
                     span[0].style.color="green"
                    isUsername=true

                 }else{
                     sapn[0].innerHTML="用户名不可用"
                     span[0].style.color='red'
                     isUsername=false
                 }
             })

         }else{
             span[0].innerHTML="只能输入手机号，邮箱"
             span[0].style.color="red"
             isUsername=false

         }
     }
     ipts[1].onfocus=()=>{
         span[1].innerHTML='6-16个字符，区分大小写'
         span[1].style.color='gray'
     }
     ipts[1].onblur=()=>{
         let zz=/^\S{6,16}$/
         if(zz.test(this.value)){
             span[1].innerHTML=""
             isPassword=true
         }else{
             span[1].innerHTML="只能输入6-16位字符，区分大小写"
             isPassword=false
         }
     }
     ipts[2].onfocus=()=>{
         span[2].innerHTML='6-16个字符，区分大小写'
         span[2].style.color='gray'
     }
     ipts[2].onblur=()=>{
         let zz=/^\S{6,16}$/
         if(zz.test(this.value)){
             span[2].innerHTML=""
             isPassword=true
         }else{
             span[2].innerHTML="只能输入6-16位字符，区分大小写"
             isPassword=false
         }
         let arr=ipts[1].value
         if(this.value=arr){
             span[2].innerHTML=""
             isPassword=true
         }else{
             span[2].innerHTML="密码不相同"
             span[2].style.color="red"
             isPassword=false
         }
     }
     btns.onclick=()=>{
         if(isUsername&&isPassword){
             let zh=ipts[0].value
             let mm=ipts[2].value
             axios
             .get(regAPI,{
                 params:{username:zh,password:mm},
             })
             .then((res)=>{
                 let obj1=res.data
                 alert(obj1.msg)
                 if(obj1.code==1){
                     location.href="dl.html"
                 }
             })

         }

     }
    </script>
  </body>
</html>
